<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="order-area">
      <div class="customer-area">
        <div class="title">
          <div class="point"></div>
          <span>基础信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>客户姓名</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.customerName }}</span>
          </el-col>
          <el-col :span="3">
            <div class="content-title">
              <span>性别</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.gender }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>客户手机号</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.customerTel }}</span>
          </el-col>
          <el-col :span="3">
            <div class="content-title">
              <span>客户地址</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.address }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>客户来源</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.customerSource }}</span>
          </el-col>
          <el-col :span="3">
            <div class="content-title">
              <span>客户邮箱</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ customer.email }}</span>
          </el-col>
        </el-row>
        <template v-if="orderHeader.some(a => a.key === 'total_money')">
          <el-row :gutter="10">
            <el-col :span="3">
              <div class="content-title">
                <span>客户付款</span>
              </div>
            </el-col>
            <el-col :span="6">
              <span>{{ order.customerPay }}</span>
            </el-col>
            <el-col :span="3">
              <div class="content-title">
                <span>合同金额</span>
              </div>
            </el-col>
            <el-col :span="6">
              <span>{{ order.orderAmount }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="3">
              <div class="content-title">
                <span>客户尾款</span>
              </div>
            </el-col>
            <el-col :span="6">
              <span>{{ order.finCost }}</span>
            </el-col>
            <el-col :span="3">
              <div class="content-title">
                <span>尾款支付方式</span>
              </div>
            </el-col>
            <el-col :span="6">
              <span v-if="order.finCostType === 0">配送前</span>
              <span v-if="order.finCostType === 1">配送后</span>
            </el-col>
          </el-row>
        </template>
        <el-row :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>签约时间</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ order.signedTime }}</span>
          </el-col>
          <el-col :span="3">
            <div class="content-title">
              <span>合同截至日</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ order.endedTime }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col v-if="order.sureOrderTime"
                  :span="3">
            <div class="content-title">
              <span>下单时间</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ order.sureOrderTime }}</span>
          </el-col>
          <el-col v-if="order.reportTime"
                  :span="3">
            <div class="content-title">
              <span>回访时间</span>
            </div>
          </el-col>
          <el-col :span="6">
            <span>{{ order.reportTime }}</span>
          </el-col>
        </el-row>
        <el-row v-if="order.remark"
                :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>备注</span>
            </div>
          </el-col>
          <el-col :span="20">
            <span>{{ order.remark }}</span>
          </el-col>
        </el-row>
        <el-row v-if="order.reportAdvice"
                :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>回访意见</span>
            </div>
          </el-col>
          <el-col :span="20">
            <span>{{ order.reportAdvice }}</span>
          </el-col>
        </el-row>
      </div>
      <v-steps :operations="operations"
               :active="operations.length + 1"></v-steps>
    </div>
    <div class="customer-area">
      <div class="title">
        <div class="point"></div>
        <span>资料</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>客户合同</span>
          </div>
        </el-col>
        <el-col :span="19">
          <div>
            <pic-view :file-list="order.contractUrlList"
                      upload-class="short-upload close-delete"
                      :pic-name-list.sync="order.contractNameList"
                      :max-size="order.contractUrlList?order.contractUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="order.status == 3 && order.contractStatus == 1">
        <el-col :span="3"
                :push="1"><span>不通过理由：</span></el-col>
        <el-col :span="3"><span>{{order.contractRemark}}</span></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>客户收支证明</span>
          </div>
        </el-col>
        <el-col :span="19">
          <div>
            <pic-view :file-list="order.incomeUrlList"
                      upload-class="short-upload close-delete"
                      :pic-name-list.sync="order.incomeNameList"
                      :max-size="order.incomeUrlList?order.incomeUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="order.status == 3 && order.incomeStatus == 1">
        <el-col :span="3"
                :push="1"><span>不通过理由：</span></el-col>
        <el-col :span="3"><span>{{order.incomeRemark}}</span></el-col>
      </el-row>
      <el-row v-if="order.passCerUrlList && order.passCerUrlList.length>0"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>下单通过凭证</span>
          </div>
        </el-col>
        <el-col :span="19">
          <div>
            <pic-view :file-list="order.passCerUrlList"
                      upload-class="short-upload close-delete"
                      :pic-name-list.sync="order.passCerNameList"
                      :max-size="order.passCerUrlList?order.passCerUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </div>
        </el-col>
      </el-row>
      <template v-if="orderHeader.some(a => a.key === 'total_money')">
        <el-row v-if="order.finCostUrlList && order.finCostUrlList.length>0"
                :gutter="10">
          <el-col :span="3">
            <div class="content-title">
              <span>尾款凭证</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :file-list="order.finCostUrlList"
                        upload-class="short-upload close-delete"
                        :pic-name-list.sync="order.finCostNameList"
                        :max-size="order.finCostUrlList?order.finCostUrlList.length:0"
                        @showImg="showImg"></pic-view>
            </div>
          </el-col>
        </el-row>
      </template>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>货物详细</span>
          </div>
        </el-col>
        <el-col :span="19">
          <el-row>
            <template v-if="orderHeader.some(a => a.key === 'total_money')">
              <el-col :span="24">
                <div class="el-table-total">
                  <span>合同金额&nbsp;{{ order.orderAmount || 0}}</span>&nbsp;&nbsp;&nbsp;
                  <span v-if="order.childOrderAmount">货物总成本&nbsp;{{ order.childOrderAmount | total(childOrders.map(a => a.productCost || 0).concat(childOrders.map(a => a.extraCost || 0))) }}</span>
                </div>
              </el-col>
            </template>
            <el-col :span="24">
              <el-collapse accordion
                           v-if="childOrders && childOrders.length > 0">
                <el-collapse-item v-for="(item, key) in childOrders"
                                  :key="key"
                                  :title="item.title | productTitle(item)"
                                  :name="key">
                  <template>
                    <div style="margin-bottom:20px;">
                      <el-table ref="multipleTable"
                                border
                                stripe
                                :data="[item]"
                                tooltip-effect="light"
                                style="width: 100%">
                        <el-table-column label="编号">
                          <template slot-scope="scope">
                            <span>{{scope.row.itemNo}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="区域">
                          <template slot-scope="scope">
                            <span>{{scope.row.area}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="品名">
                          <template slot-scope="scope">
                            <span>{{scope.row.productName}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="品牌">
                          <template slot-scope="scope">
                            <span>{{scope.row.brandName}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="产品型号">
                          <template slot-scope="scope">
                            <span>{{scope.row.sku}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="尺寸">
                          <template slot-scope="scope">
                            <span>{{scope.row.size}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="订货数量">
                          <template slot-scope="scope">
                            <span>{{scope.row.quantity}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column v-if="childOrderHeader.some(a => a.key == 'price')"
                                         label="单价">
                          <template slot-scope="scope">
                            <span>{{scope.row.price}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column v-if="childOrderHeader.some(a => a.key == 'total_money')"
                                         label="总价">
                          <template slot-scope="scope">
                            <span>{{scope.row.totalMoney}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="主面料"
                                         width="130">
                          <template slot-scope="scope">
                            <span>{{scope.row.mainFabric}}</span>
                            <pic-view :file-list="scope.row.bodyUrlList"
                                      upload-class="small-upload close-delete"
                                      :pic-name-list.sync="scope.row.bodyNameList"
                                      :max-size="scope.row.bodyUrlList?scope.row.bodyUrlList.length:0"
                                      @showImg="showImg"></pic-view>
                          </template>
                        </el-table-column>
                        <el-table-column label="抱枕面料"
                                         width="130">
                          <template slot-scope="scope">
                            <span>{{scope.row.bolsterFabric}}</span>
                            <pic-view :file-list="scope.row.pillowUrlList"
                                      upload-class="small-upload close-delete"
                                      :pic-name-list.sync="scope.row.pillowNameList"
                                      :max-size="scope.row.pillowUrlList?scope.row.pillowUrlList.length:0"
                                      @showImg="showImg"></pic-view>
                          </template>
                        </el-table-column>
                        <el-table-column label="主面料木质部分材质"
                                         width="130">
                          <template slot-scope="scope">
                            <span>{{scope.row.woodTexture}}</span>
                            <pic-view :file-list="scope.row.woodenUrlList"
                                      upload-class="small-upload close-delete"
                                      :pic-name-list.sync="scope.row.woodenNameList"
                                      :max-size="scope.row.woodenUrlList?scope.row.woodenUrlList.length:0"
                                      @showImg="showImg"></pic-view>
                          </template>
                        </el-table-column>
                        <el-table-column label="其他材质备注"
                                         width="130">
                          <template slot-scope="scope">
                            <span>{{scope.row.otherTexture}}</span>
                            <pic-view :file-list="scope.row.otherUrlList"
                                      upload-class="small-upload  close-delete"
                                      :pic-name-list.sync="scope.row.otherNameList"
                                      :max-size="scope.row.otherUrlList?scope.row.otherUrlList.length:0"
                                      @showImg="showImg"></pic-view>
                          </template>
                        </el-table-column>
                        <el-table-column v-if="item.manufactorCode"
                                         label="供货方订单编号">
                          <template slot-scope="scope">
                            <span>{{scope.row.manufactorCode}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column v-if="childOrderHeader.some(a => a.key == 'product_cost')"
                                         label="货物成本">
                          <template slot-scope="scope">
                            <span>{{scope.row.productCost}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column v-if="childOrderHeader.some(a => a.key == 'other_cost')"
                                         label="额外成本">
                          <template slot-scope="scope">
                            <span>{{scope.row.extraCost}}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                  <el-row>
                    <el-col :span="2">官网截图：</el-col>
                    <pic-view :file-list="item.officialUrlList"
                              upload-class="lang-upload close-delete"
                              :pic-name-list.sync="item.officialNameList"
                              :max-size="item.officialUrlList?item.officialUrlList.length:0"
                              @showImg="showImg"></pic-view>
                  </el-row>
                  <el-row>
                    <el-col :span="2">产品图片：</el-col>
                    <pic-view :file-list="item.productUrlList"
                              upload-class="lang-upload close-delete"
                              :pic-name-list.sync="item.productNameList"
                              :max-size="item.productUrlList?item.productUrlList.length:0"
                              @showImg="showImg"></pic-view>
                  </el-row>
                  <el-row v-if="item.status == 8">
                    <el-col :span="3">不通过理由：</el-col>
                    <el-col :span="3"><span>{{item.itemMark}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col v-if="item.paymentTime"
                            :span="2">付款时间：</el-col>
                    <el-col :span="3"><span>{{item.paymentTime}}</span></el-col>
                    <el-col v-if="item.goodsFinishTime"
                            :span="2">货好时间：</el-col>
                    <el-col :span="3"><span>{{item.goodsFinishTime}}</span></el-col>
                    <el-col v-if="item.arrivalTime"
                            :span="2">预计到港时间：</el-col>
                    <el-col :span="3"><span>{{item.arrivalTime}}</span></el-col>
                    <el-col v-if="item.laidUpTime"
                            :span="2">入库时间：</el-col>
                    <el-col :span="3"><span>{{item.laidUpTime}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col v-if="item.sendTime"
                            :span="2">配送时间：</el-col>
                    <el-col :span="3"><span>{{item.sendTime}}</span></el-col>
                    <el-col v-if="item.finishedTime"
                            :span="2">完成时间：</el-col>
                    <el-col :span="3"><span>{{item.finishedTime}}</span></el-col>
                  </el-row>
                  <template v-if="item.problem">
                    <el-row>
                      <el-col :span="2">问题：</el-col>
                      <pic-view :file-list="item.problemUrlList"
                                upload-class="short-upload close-delete"
                                :pic-name-list.sync="item.problemNameList"
                                :max-size="item.problemUrlList?item.problemUrlList.length:0"
                                @showImg="showImg"></pic-view>
                    </el-row>
                    <el-row>
                      <el-col :span="2">问题描述：</el-col>
                      <el-col :span="3"><span>{{item.problem}}</span></el-col>
                      <el-col :span="2">时间：</el-col>
                      <el-col :span="3"><span>{{item.solvedTime}}</span></el-col>
                      <el-col :span="2">解决方案：</el-col>
                      <el-col :span="10"><span>{{item.solvedPlan}}</span></el-col>
                    </el-row>

                  </template>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="foot">
        <el-button type="primary"
                   @click="() => {this.$router.go(-1)}">确定</el-button>
      </div>
    </div>
  </div>
</template>

<style>
.el-table-total {
  float: right;
  width: 30%;
  height: 34px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  justify-content: center;
  display: flex;
  line-height: 34px;
}
</style>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import vSteps from '@/components/v-steps'
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { api } from '@/api'
import { packageImgList } from '@/utils/imgPackage'
import { validatenull, vListLength } from '@/utils/validate'
import { total, productTitle } from '@/utils/filters'

export default {
  data() {
    return {
      buttonAuthority: [],
      orderHeader: [],
      childOrderHeader: [],
      orderId: this.$route.params.orderId || null,
      customerList: [],
      planDialog: false,
      customer: {},
      order: {},
      orderCustomerInfo: {},
      childOrders: [],
      operations: []
    }
  },
  components: {
    picView, vViewer, viewPage, vSteps
  },
  computed: {
    ...mapGetters([
      'authority'
    ])
  },
  activated() {
    this.setAuthority()
    this.getOrder()
    this.getOperation()
  },
  methods: {
    getToken,
    total,
    setAuthority() {
      this.buttonAuthority = this.authority.buttonAuthority
      this.orderHeader = this.authority.orderHeader
      this.childOrderHeader = this.authority.childOrderHeader
    },
    getOrder() {
      if (!validatenull(this.orderId)) {
        this.$http.get(api.ORDER_DETAIL, { orderId: this.orderId }).then(
          res => {
            if (res.error.code === HTTPSUCCESS) {
              this.order = res.result.order
              this.customer = res.result.customer
              this.childOrders = res.result.childOrders
              if (this.order.finCostPicture) {
                const finCostList = packageImgList(this.order.finCostPicture)
                this.order.finCostNameList = finCostList[0]
                this.order.finCostUrlList = finCostList[1]
              }
              if (this.order.contract) {
                const contractList = packageImgList(this.order.contract)
                this.order.contractNameList = contractList[0]
                this.order.contractUrlList = contractList[1]
              }
              if (this.order.income) {
                const contractList = packageImgList(this.order.income)
                this.order.incomeNameList = contractList[0]
                this.order.incomeUrlList = contractList[1]
              }
              if (this.order.passProof) {
                const passCerList = packageImgList(this.order.passProof)
                this.order.passCerNameList = passCerList[0]
                this.order.passCerUrlList = passCerList[1]
              }
              this.childOrders.forEach(e => {
                if (e.officialPicture) {
                  const officialList = packageImgList(e.officialPicture)
                  e.officialNameList = officialList[0]
                  e.officialUrlList = officialList[1]
                }
                if (e.productPicture) {
                  const productList = packageImgList(e.productPicture)
                  e.productNameList = productList[0]
                  e.productUrlList = productList[1]
                }
                if (e.mainFabricPicture) {
                  const bodyList = packageImgList(e.mainFabricPicture)
                  e.bodyNameList = [e.mainFabricPicture]
                  e.bodyUrlList = bodyList[1]
                }
                if (e.bolsterFabricPicture) {
                  const pillowList = packageImgList(e.bolsterFabricPicture)
                  e.pillowNameList = [e.bolsterFabricPicture]
                  e.pillowUrlList = pillowList[1]
                }
                if (e.woodTexturePicture) {
                  const woodenList = packageImgList(e.woodTexturePicture)
                  e.woodenNameList = [e.woodTexturePicture]
                  e.woodenUrlList = woodenList[1]
                }
                if (e.otherTexturePicture) {
                  const otherList = packageImgList(e.otherTexturePicture)
                  e.otherNameList = [e.otherTexturePicture]
                  e.otherUrlList = otherList[1]
                }
                if (e.problemPicture) {
                  const problemList = packageImgList(e.problemPicture)
                  e.problemNameList = problemList[0]
                  e.problemUrlList = problemList[1]
                }
              })
            } else {
              this.$msg._message(res.error.msg, 'error')
            }
          }
        )
      }
    },
    getOperation() {
      this.$http.get(api.ORDER_OPERATION, { orderId: this.orderId }).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.operations = res.result
          } else {
            this.$msg._message(res.error.message, 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
